
function ContentController(contentId, contentParentId) {
    var oddColor = '#C9E9FF';
    var clearInvisible = true;
    var timeoutId = null;

    this.init = function () {
        var parent = document.getElementById(contentParentId);
        var child = document.getElementById(contentId);
        var childTop = child.style.top.replace('px', '');
        
        child.style.top = (childTop + parent.offsetHeight) + 'px';
    };

    this.addMessage = function (messageText) {
        var message = eval("(" + messageText + ")");
        var newRecId = createRecord(message);
        this.shiftRecords();
    };

    this.shiftRecords = function () {
        var contentParent = document.getElementById(contentParentId);
        var content = document.getElementById(contentId);

        var contentTop = content.style.top.replace('px', '');
        content.style.top = --contentTop + 'px';

        if (contentTop > (contentParent.offsetHeight - content.offsetHeight)) {
            var myContext = this;
            if (timeoutId) {
                window.clearTimeout(timeoutId);
            }
            timeoutId = window.setTimeout(function () { myContext.shiftRecords.call(myContext); }, 10);
        } else {
            timeoutId = null;
        }
    };

    
    var elem = function (id) {
        return document.getElementById(id);
    };    

    var createRecord = function (message) {
        var content = elem(contentId);
        var newRecId = generateNewRecId();

        var newRecord = document.createElement('div');
        newRecord.setAttribute('id', newRecId);
        newRecord.setAttribute('class', 'record');
        content.appendChild(newRecord);

        var sectionFrom = document.createElement('span');
        sectionFrom.innerHTML = message.from;
        sectionFrom.setAttribute('class', 'sectionFrom');
        newRecord.appendChild(sectionFrom);

        var sectionDate = document.createElement('span');
        sectionDate.innerHTML = message.time
        sectionDate.setAttribute('class', 'sectionDate');
        sectionFrom.appendChild(sectionDate);

        var sectionMessage = document.createElement('div');
        sectionMessage.innerHTML = message.message;
        sectionMessage.setAttribute('class', 'sectionMessage');
        newRecord.appendChild(sectionMessage); 

        if (newRecId.replace('rec_', '') % 2 == 1) {
            newRecord.style.backgroundColor = oddColor;
        }

        return newRecId;
    };

    var generateNewRecId = function () {
        var newRecId = "rec_1";
        var lastRec = elem(contentId).lastChild;
        if (lastRec) {
            var lastRecId = parseInt(lastRec.id.replace('rec_', ''));
            newRecId = 'rec_' + ++lastRecId;
        }

        return newRecId;
    };

}